<template>
    <div class='app-container'>
        <myTable ref="mytable"
               :config="tableconfig"
               @handleSelectChange="handleSelectChange">
        <div slot="mytablebody">
        </div>
        <!-- 图片 -->
        <template v-slot:picture="{ data }">
            <el-image v-if="data.picture" style="width: 80%; height: 50px" :src="data.picture"></el-image>
            <div v-else>
                <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    list-type="picture">
                    <el-button size="small" type="primary">上传图片</el-button>
                </el-upload>
            </div>
        </template>
        <!-- 图片路径 -->
        <template v-slot:pictureUrl="{ data }"> 
            <el-link class="blue-link" :underline="false">
                {{data.pictureUrl}}
            </el-link>
        </template>
        <!-- 启动 -->
        <template v-slot:enable="{ data }">
            <el-switch
                v-model="data.enable"
                active-color="#13ce66"
                inactive-color="#BFBFBF">
            </el-switch>
        </template>
        </myTable>
    </div>
</template>
<script>
import imageUpload from "@/components/imageUpload"
export default {
    components:{imageUpload},
    data () {
    //这里存放数据
    return {
        tableconfig: {
            loading: false,
            isselection: false,
            ispagination: true,
            tabledata: [
                {
                    id:1,
                    name:'banner01',
                    picture:"https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500",
                    pictureUrl:'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                    size:'1920*400',
                    enable:false,
                    
                },
                {
                    id:2,
                    name:'banner01',
                    picture:"",
                    pictureUrl:'',
                    size:'1920*400',
                    enable:false,
                },
            ],
            isindex: true,
            thead: [
              { sort: null, label: '序列号', prop: 'id', width: 150 },
              { sort: null,  prop: 'name',label: '类别名称',  width: 200 },
              { sort: null, label: '图片', prop: 'picture', type: 'slot',width:200},
              { sort: null, label: '图片路径', prop: 'pictureUrl',type: 'slot'},
              { sort: null, label: '尺寸（px）', prop: 'size', width: 150 },
              { sort: null, label: '是否启用', prop: 'enable',type: 'slot', width: 150,},
                
            ],
            currentpage: 1,
            pagesize: 0,
            total: 0,
        },
        }
    },
    methods:{
        handleSelectChange(section) {
            this.selectrow = section;
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        }
    }
}
</script>
<style scoped lang="scss">
@import './../../assets/reset.css';
.app-container{
  width: 100%;
  padding: 20px 30px
}
.blue-link{
    color: #1890FF;
}
</style>